import React, { useEffect, useState, Fragment } from "react";
import './switchCities.css'
import axios from 'axios'
import { Indexes, IndexesAnchor, CellGroup, Cell } from 'tdesign-mobile-react';
import { NavBar, Space, Toast } from 'antd-mobile'
import { Input } from 'antd';
import { CloseOutline, MoreOutline, SearchOutline } from 'antd-mobile-icons'
import { useNavigate } from "react-router-dom";
export default function switchCities() {
    const [city, setCity] = useState([])
    const navigate = useNavigate()
    const getCity = async () => {
        const res = await axios.get('http://localhost:3000/ycf/cityList')
        if (res.data.code == 200) {
            setCity(res.data.data)
            console.log(res.data.data)
        }
    }

    useEffect(() => {
        getCity()
    }, [])

    let height = 0;
    try {
        height = window.innerHeight - document.querySelector('.tdesign-demo-topnav').clientHeight;
    } catch {
        //
    }

    const indexList = city.map((item) => item.index);
    if (city.length === 0) {
        return <div>加载中...</div>; // 添加加载状态  
    }
    const back = () => {
        Toast.show({
            content: '点击了返回区域',
            duration: 1000,
        })
        navigate(-1)
    }

    const { Search } = Input;
    const onSearch = (value, _e, info) => console.log(info?.source, value);
    return (
        <div className="cities-box">
            <div className="cities-title">
                <NavBar onBack={back}>切换城市</NavBar>
            </div>
            <div className="cities-input">
                <Search
                    placeholder="请输入城市名称"
                    onSearch={onSearch}
                    onClick={()=>{
                        navigate('/citySearch')
                    }}
                    style={{
                        width: 400,
                    }}
                />
            </div>
            <div className="cities-content">
                <div className="cities-option">

                </div>
                <div style={{ position: 'relative', height }}>
                    <Indexes indexList={indexList}>
                        {city.map((item) => (
                            <Fragment key={item.index}>
                                <IndexesAnchor index={item.index} />
                                <CellGroup>
                                    {item.children.map((val, index) => (
                                        <Cell key={index} title={val} />
                                    ))}
                                </CellGroup>
                            </Fragment>
                        ))}
                    </Indexes>
                </div>
            </div>
        </div>
    )
}